<template>
  <div class="case-review-container">
    <!-- 顶部导航栏 -->
    <div class="navbar">
      <div class="nav-back" @click="$router.go(-1)">
        <i class="fas fa-chevron-left"></i>
      </div>
      <div class="nav-title">风险场景干预指南</div>
      <div class="nav-placeholder"></div>
    </div>

    <!-- 温馨提醒 -->
    <div class="reminder">*温馨提醒：请完整填写表单内容后提交</div>

    <!-- 头部 -->
    <div class="header">
      <div class="title-icon">📋</div>
      <h1>危机个案复盘分析表</h1>
      <p class="subtitle">通过结构化复盘，提炼经验教训，优化危机应对流程</p>
    </div>

    <form class="form-container" @submit.prevent="submitForm">
      <!-- 基本信息 -->
      <div class="form-card fade-in" data-field="name">
        <div class="card-header">
          <div class="card-counter">1</div>
          <div class="card-title"><span class="icon">👤</span> 基本信息</div>
        </div>

        <div class="form-row">
          <div class="form-group">
            <label class="form-label"
              ><span class="label-icon">👨‍💼</span>姓名
              <span class="required">*</span></label
            >
            <input
              type="text"
              class="form-input"
              :class="{ error: validationErrors.name }"
              placeholder="请输入您的姓名"
              v-model="formData.name"
            />
            <span v-if="validationErrors.name" class="error-message">{{
              validationErrors.name
            }}</span>
          </div>

          <div class="form-group">
            <label class="form-label"
              ><span class="label-icon">🏢</span>部门
              <span class="required">*</span></label
            >
            <input
              type="text"
              class="form-input"
              :class="{ error: validationErrors.department }"
              placeholder="请输入部门名称"
              v-model="formData.department"
            />
            <span v-if="validationErrors.department" class="error-message">{{
              validationErrors.department
            }}</span>
          </div>
        </div>

        <div class="form-group" data-field="phone">
          <label class="form-label"
            ><span class="label-icon">📱</span>手机号码
            <span class="required">*</span></label
          >
          <input
            type="tel"
            class="form-input"
            :class="{ error: validationErrors.phone }"
            placeholder="请输入11位手机号码"
            v-model="formData.phone"
            maxlength="11"
          />
          <span class="form-hint">用于复盘结果跟进联系</span>
          <span v-if="validationErrors.phone" class="error-message">{{
            validationErrors.phone
          }}</span>
        </div>
      </div>

      <!-- 案例背景 -->
      <div class="form-card" data-field="incidentTime">
        <div class="card-header">
          <div class="card-counter">2</div>
          <div class="card-title"><span class="icon">🕒</span> 案例背景</div>
        </div>

        <div class="case-meta">
          <div class="form-group">
            <label class="form-label"
              ><span class="label-icon">📅</span>时间
              <span class="required">*</span></label
            >
            <input
              type="datetime-local"
              class="form-input"
              :class="{ error: validationErrors.incidentTime }"
              v-model="formData.incidentTime"
            />
            <span v-if="validationErrors.incidentTime" class="error-message">{{
              validationErrors.incidentTime
            }}</span>
          </div>

          <div class="form-group">
            <label class="form-label"
              ><span class="label-icon">📍</span>地点
              <span class="required">*</span></label
            >
            <input
              type="text"
              class="form-input"
              :class="{ error: validationErrors.location }"
              placeholder="事件发生详细地点"
              v-model="formData.location"
            />
            <span v-if="validationErrors.location" class="error-message">{{
              validationErrors.location
            }}</span>
          </div>
        </div>

        <div class="form-group" data-field="eventDescription">
          <label class="form-label"
            ><span class="label-icon">⚠️</span>事件描述
            <span class="required">*</span></label
          >
          <textarea
            class="form-input"
            :class="{ error: validationErrors.eventDescription }"
            placeholder="请详细描述危机事件的发生背景、涉及人员及具体情况..."
            v-model="formData.eventDescription"
            rows="4"
          ></textarea>
          <span class="form-hint">包括事件起因、发展过程和关键节点</span>
          <span
            v-if="validationErrors.eventDescription"
            class="error-message"
            >{{ validationErrors.eventDescription }}</span
          >
        </div>
      </div>

      <!-- 其他表单部分类似添加验证提示... -->
      <!-- 处理过程 -->
      <div class="form-card" data-field="process">
        <div class="card-header">
          <div class="card-counter">3</div>
          <div class="card-title"><span class="icon">📝</span> 处理过程</div>
        </div>

        <div class="form-group">
          <label class="form-label"
            ><span class="label-icon">🔧</span>处理流程
            <span class="required">*</span></label
          >
          <textarea
            class="form-input"
            :class="{ error: validationErrors.process }"
            placeholder="请按时间顺序描述危机处理的全过程，包括采取的行动、参与人员、协作方式等..."
            v-model="formData.process"
            rows="4"
          ></textarea>
          <span class="form-hint">描述关键决策点和应对措施</span>
          <span v-if="validationErrors.process" class="error-message">{{
            validationErrors.process
          }}</span>
        </div>
      </div>

      <!-- 有效应对 -->
      <div class="form-card" data-field="effectiveActions">
        <div class="card-header">
          <div class="card-counter">4</div>
          <div class="card-title">
            <span class="icon">✅</span> 有效应对措施
          </div>
        </div>

        <div class="form-group">
          <label class="form-label"
            ><span class="label-icon">👍</span>成功应对
            <span class="required">*</span></label
          >
          <textarea
            class="form-input"
            :class="{ error: validationErrors.effectiveActions }"
            placeholder="在处理过程中，哪些措施特别有效？为什么有效？取得了什么效果？..."
            v-model="formData.effectiveActions"
            rows="4"
          ></textarea>
          <span class="form-hint">请具体说明效果良好的策略和方法</span>
          <span
            v-if="validationErrors.effectiveActions"
            class="error-message"
            >{{ validationErrors.effectiveActions }}</span
          >
        </div>
      </div>

      <!-- 经验总结 -->
      <div class="form-card" data-field="learnings">
        <div class="card-header">
          <div class="card-counter">5</div>
          <div class="card-title"><span class="icon">💡</span> 经验总结</div>
        </div>

        <div class="form-group">
          <label class="form-label"
            ><span class="label-icon">🎓</span>收获与学习
            <span class="required">*</span></label
          >
          <textarea
            class="form-input"
            :class="{ error: validationErrors.learnings }"
            placeholder="通过这个案例，你学到了什么？有哪些经验可以应用到未来？..."
            v-model="formData.learnings"
            rows="4"
          ></textarea>
          <span v-if="validationErrors.learnings" class="error-message">{{
            validationErrors.learnings
          }}</span>
        </div>

        <div class="form-group">
          <label class="form-label"
            ><span class="label-icon">❓</span>疑问与困惑</label
          >
          <textarea
            class="form-input"
            placeholder="在处理过程中，有哪些疑问尚未解决？有什么困惑需要进一步探讨？..."
            v-model="formData.questions"
            rows="3"
          ></textarea>
          <span class="form-hint">请列出需要进一步解答的问题</span>
        </div>
      </div>

      <!-- 总结与跟进 -->
      <div class="form-card" data-field="summary">
        <div class="card-header">
          <div class="card-counter">6</div>
          <div class="card-title"><span class="icon">📋</span> 总结与跟进</div>
        </div>

        <div class="form-group">
          <label class="form-label"
            ><span class="label-icon">📊</span>复盘总结
            <span class="required">*</span></label
          >
          <textarea
            class="form-input"
            :class="{ error: validationErrors.summary }"
            placeholder="请用3-5句话总结本次危机处理的整体效果、关键成功因素和主要经验教训..."
            v-model="formData.summary"
            rows="4"
          ></textarea>
          <span v-if="validationErrors.summary" class="error-message">{{
            validationErrors.summary
          }}</span>
        </div>

        <div class="form-group" data-field="followUp">
          <label class="form-label"
            ><span class="label-icon">➡️</span>后续跟进事项
            <span class="required">*</span></label
          >
          <textarea
            class="form-input"
            :class="{ error: validationErrors.followUp }"
            placeholder="列出需要继续跟进的事项、责任人及时间节点..."
            v-model="formData.followUp"
            rows="4"
          ></textarea>
          <span class="form-hint">格式：事项 - 负责人 - 截止时间</span>
          <span v-if="validationErrors.followUp" class="error-message">{{
            validationErrors.followUp
          }}</span>
        </div>
      </div>
    </form>

    <!-- 提交按钮容器 -->
    <div class="submit-container">
      <div class="button-group">
        <button
          type="button"
          class="submit-btn primary"
          @click="submitForm"
          :disabled="isSubmitting"
        >
          <span v-if="isSubmitting" class="btn-loading"></span>
          <span v-else class="btn-icon">📤</span>
          {{ isSubmitting ? "提交中..." : "提交并查看报告" }}
        </button>
      </div>
    </div>

    <!-- 成功消息 -->
    <div v-if="showSuccessMessage" class="success-message">
      <div class="success-content">
        <div class="success-header">
          <span class="success-icon">✅</span>
          <h3>提交成功！</h3>
        </div>
        <div class="success-details">
          <p><strong>案例编号：</strong>{{ successData.caseId }}</p>
          <p><strong>提交时间：</strong>{{ successData.submitTime }}</p>
          <p class="success-tip">3秒后将自动跳转到分析报告页面...</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { riskReviewDataSave } from "../../api/manager";

export default {
  name: "CaseReviewForm",
  data() {
    return {
      formData: {
        name: "",
        department: "",
        phone: "",
        incidentTime: "",
        location: "",
        eventDescription: "",
        process: "",
        effectiveActions: "",
        learnings: "",
        questions: "",
        summary: "",
        followUp: "",
      },
      showSuccessMessage: false,
      report_url: "https://lesson.iapeap.com/wjfpb.pdf",
      // 新增验证状态
      validationErrors: {},
      isSubmitting: false,
      // 成功状态详情
      successData: {
        caseId: "",
        submitTime: "",
      },
    };
  },
  mounted() {
    // 设置默认日期时间为当前时间
    const now = new Date();
    const year = now.getFullYear();
    const month = String(now.getMonth() + 1).padStart(2, "0");
    const day = String(now.getDate()).padStart(2, "0");
    const hours = String(now.getHours()).padStart(2, "0");
    const minutes = String(now.getMinutes()).padStart(2, "0");

    const dateTimeValue = `${year}-${month}-${day}T${hours}:${minutes}`;
    this.formData.incidentTime = dateTimeValue;
  },
  methods: {
    validateForm() {
      this.validationErrors = {};

      const requiredFields = [
        { key: "name", label: "姓名" },
        { key: "department", label: "部门" },
        { key: "phone", label: "手机号码" },
        { key: "incidentTime", label: "时间" },
        { key: "location", label: "地点" },
        { key: "eventDescription", label: "事件描述" },
        { key: "process", label: "处理流程" },
        { key: "effectiveActions", label: "有效应对措施" },
        { key: "learnings", label: "经验总结" },
        { key: "summary", label: "复盘总结" },
        { key: "followUp", label: "后续跟进事项" },
      ];

      let isValid = true;

      requiredFields.forEach((field) => {
        if (
          !this.formData[field.key] ||
          this.formData[field.key].trim() === ""
        ) {
          this.validationErrors[field.key] = `${field.label}不能为空`;
          isValid = false;
        }
      });

      // 手机号码格式验证
      if (this.formData.phone && !/^1[3-9]\d{9}$/.test(this.formData.phone)) {
        this.validationErrors.phone = "请输入正确的手机号码格式";
        isValid = false;
      }

      return isValid;
    },

    scrollToFirstError() {
      const firstErrorKey = Object.keys(this.validationErrors)[0];
      if (firstErrorKey) {
        const errorElement = document.querySelector(
          `[data-field="${firstErrorKey}"]`
        );
        if (errorElement) {
          errorElement.scrollIntoView({
            behavior: "smooth",
            block: "center",
          });

          // 添加闪烁效果
          errorElement.classList.add("error-highlight");
          setTimeout(() => {
            errorElement.classList.remove("error-highlight");
          }, 2000);
        }
      }
    },

    async submitForm() {
      // 验证表单
      if (!this.validateForm()) {
        this.$nextTick(() => {
          this.scrollToFirstError();
        });
        return;
      }

      this.isSubmitting = true;

      try {
        // 构建提交数据
        let data = {
          createUser: localStorage.getItem("userId"),
          name: this.formData.name,
          department: this.formData.department,
          phone: this.formData.phone,
          caseTime: this.formatDateTime(this.formData.incidentTime),
          address: this.formData.location,
          description: this.formData.eventDescription,
          process: this.formData.process,
          countermeasures: this.formData.effectiveActions,
          experience: this.formData.learnings,
          doubt: this.formData.questions,
          summary: this.formData.summary,
          followUp: this.formData.followUp,
          createTime: this.getCurrentDateTime(),
        };

        const res = await riskReviewDataSave(data);

        // 设置成功数据
        this.successData = {
          caseId: res.data?.id || `CR${Date.now()}`,
          submitTime: this.getCurrentDateTime(),
        };

        // this.showSuccessMessage = true;

        // 平滑滚动到顶部
        window.scrollTo({
          top: 0,
          behavior: "smooth",
        });

        // 3秒后跳转到报告页面
        setTimeout(() => {
          this.$router.push({
            name: "预约会议",
            query: {
              id: res.data.id,
            },
          });
        }, 0);
      } catch (error) {
        console.error("提交失败:", error);
        // 可以添加错误提示
      } finally {
        this.isSubmitting = false;
      }
    },

    formatDateTime(dateTimeString) {
      if (!dateTimeString) return "";

      const date = new Date(dateTimeString);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const day = String(date.getDate()).padStart(2, "0");
      const hours = String(date.getHours()).padStart(2, "0");
      const minutes = String(date.getMinutes()).padStart(2, "0");

      return `${year}-${month}-${day} ${hours}:${minutes}:00`;
    },

    getCurrentDateTime() {
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, "0");
      const day = String(now.getDate()).padStart(2, "0");
      const hours = String(now.getHours()).padStart(2, "0");
      const minutes = String(now.getMinutes()).padStart(2, "0");
      const seconds = String(now.getSeconds()).padStart(2, "0");

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },

    scheduleMeeting() {
      this.$router.push("/trial/huiyi");
    },

    resetForm() {
      this.formData = {
        name: "",
        department: "",
        phone: "",
        incidentTime: "",
        location: "",
        eventDescription: "",
        process: "",
        effectiveActions: "",
        learnings: "",
        questions: "",
        summary: "",
        followUp: "",
      };

      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, "0");
      const day = String(now.getDate()).padStart(2, "0");
      const hours = String(now.getHours()).padStart(2, "0");
      const minutes = String(now.getMinutes()).padStart(2, "0");

      this.formData.incidentTime = `${year}-${month}-${day}T${hours}:${minutes}`;
      this.validationErrors = {};
    },
  },
};
</script>

<style scoped>
/* 全局样式 */
.case-review-container {
  max-width: 500px;
  margin: 0 auto;
  background: linear-gradient(135deg, #edf2fb 0%, #e2eafc 100%);
  color: #2d3748;
  line-height: 1.6;
  min-height: 100vh;
  padding: 15px;
  font-size: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, sans-serif;
}

/* 温馨提醒 */
.reminder {
  width: 100%;
  text-align: center;
  color: #888;
  font-size: 12px;
  margin: 60px 0 10px 0;
  padding: 8px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  backdrop-filter: blur(4px);
}

/* 导航栏 */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  z-index: 1000;
  /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
}

.nav-back {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5b67ff;
  cursor: pointer;
  transition: all 0.3s ease;
  touch-action: manipulation; /* 改善触摸响应 */
}

.nav-back:hover {
  background: #eef0ff;
}

.nav-title {
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

.nav-placeholder {
  width: 40px;
}

/* 容器 */
.form-container {
  max-width: 680px;
  width: 100%;
  margin-bottom: 100px;
}

/* 头部 */
.header {
  text-align: center;
  padding: 20px 0 20px;
  position: relative;
  margin-top: 10px;
}

.header h1 {
  font-size: 2rem;
  font-weight: 800;
  color: #1d3557;
  margin-bottom: 12px;
  letter-spacing: -0.5px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.title-icon {
  background: linear-gradient(135deg, #4361ee, #3a0ca3);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  box-shadow: 0 6px 15px rgba(67, 97, 238, 0.3);
  font-size: 1.8rem;
}

.subtitle {
  color: #718096;
  font-size: 1.05rem;
  max-width: 90%;
  margin: 0 auto;
  line-height: 1.6;
  background: rgba(255, 255, 255, 0.7);
  padding: 14px 20px;
  border-radius: 14px;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* 表单卡片 */
.form-card {
  background: #ffffff;
  border-radius: 14px;
  padding: 22px;
  margin-bottom: 22px;
  box-shadow: 0 6px 18px rgba(67, 97, 238, 0.15);
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.form-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(67, 97, 238, 0.2);
}

.form-card:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: #4361ee;
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid #e2e8f0;
}

.card-title {
  font-size: 1.35rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #3a0ca3;
}

.card-title .icon {
  font-size: 1.2em;
}

/* 卡片计数器 */
.card-counter {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #4361ee, #3a0ca3);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  margin-right: 15px;
  box-shadow: 0 3px 8px rgba(67, 97, 238, 0.3);
}

/* 表单组 */
.form-group {
  margin-bottom: 28px;
  position: relative;
  animation: fadeIn 0.6s ease-out;
}

.form-group:last-child {
  margin-bottom: 0;
}

.form-label {
  display: block;
  margin-bottom: 10px;
  font-weight: 600;
  color: #1d3557;
  display: flex;
  align-items: center;
  font-size: 1.05rem;
}

.form-label .label-icon {
  margin-right: 12px;
  color: #4361ee;
  width: 24px;
  text-align: center;
  font-size: 1.1em;
}

/* 移除必填样式 */
.required:after {
  content: "";
}

/* 输入框样式 */
.form-input {
  width: 100%;
  padding: 16px 20px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8f9fa;
  font-size: 1.05rem;
  color: #2d3748;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.form-input:focus {
  outline: none;
  border-color: #4361ee;
  box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2);
  background: white;
}

textarea.form-input {
  min-height: 140px;
  resize: vertical;
  line-height: 1.7;
  font-family: inherit;
}

/* 双列布局 */
.form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 22px;
}

.form-row .form-group {
  flex: 1;
  margin-bottom: 0;
}

/* 时间地点组 */
.case-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 22px;
}

/* 提交按钮 */
.submit-container {
  max-width: 500px;
  margin: 0 auto;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  padding: 18px 20px;
  box-shadow: 0 -8px 25px rgba(0, 0, 0, 0.1);
  z-index: 100;
  display: flex;
  justify-content: center;
  backdrop-filter: blur(5px);
}

.button-group {
  display: flex;
  gap: 12px;
  width: 100%;
  max-width: 680px;
}

.submit-btn {
  flex: 1;
  border: none;
  padding: 18px;
  border-radius: 12px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.submit-btn.primary {
  background: linear-gradient(135deg, #4361ee, #3a0ca3);
  color: white;
  box-shadow: 0 4px 15px rgba(67, 97, 238, 0.3);
}

.submit-btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(67, 97, 238, 0.4);
}

.submit-btn.secondary {
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  color: #495057;
  border: 1px solid #dee2e6;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.submit-btn.secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  background: linear-gradient(135deg, #e9ecef, #dee2e6);
}

.btn-icon {
  font-size: 1.1rem;
}

/* 成功消息 */
.success-message {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  color: #3a0ca3;
  padding: 5px 16px;
  border-radius: 60px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 2px solid #4361ee;
}

.success-icon {
  font-size: 1.2rem;
}

/* 表单提示 */
.form-hint {
  font-size: 0.92rem;
  color: #718096;
  margin-top: 6px;
  display: block;
  padding-left: 34px;
  font-style: italic;
}

/* 动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0% {
    transform: translateX(-50%) scale(1);
  }
  50% {
    transform: translateX(-50%) scale(1.05);
  }
  100% {
    transform: translateX(-50%) scale(1);
  }
}

.fade-in {
  animation: fadeIn 0.6s ease-out;
}

/* 响应式调整 */
@media (max-width: 680px) {
  .header h1 {
    font-size: 1.8rem;
  }

  .card-title {
    font-size: 1.25rem;
  }

  .form-input {
    padding: 14px 16px;
    font-size: 1rem;
  }

  .submit-btn {
    padding: 16px 0;
    font-size: 13px;
  }

  .button-group {
    flex-direction: center;
    gap: 10px;
  }

  .case-meta {
    grid-template-columns: 1fr;
  }

  .form-row {
    flex-direction: column;
    gap: 20px;
  }

  .reminder {
    margin-top: 50px;
    font-size: 11px;
  }
}
/* 必填字段标识 */
.required {
  color: #ff4757;
  margin-left: 2px;
}

/* 错误状态 */
.form-input.error {
  border-color: #ff4757;
  box-shadow: 0 0 0 3px rgba(255, 71, 87, 0.1);
}

.error-message {
  color: #ff4757;
  font-size: 0.85rem;
  margin-top: 6px;
  display: block;
  padding-left: 34px;
}

/* 错误高亮动画 */
.error-highlight {
  animation: errorPulse 2s ease-in-out;
}

@keyframes errorPulse {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  75% {
    transform: translateX(5px);
  }
}

/* 加载状态 */
.btn-loading {
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

/* 完善成功消息样式 */
.success-message {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  z-index: 2000;
  padding: 24px;
  max-width: 400px;
  width: 90%;
  text-align: center;
  border: 2px solid #4361ee;
}

.success-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.success-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.success-header h3 {
  margin: 0;
  color: #3a0ca3;
  font-size: 1.4rem;
}

.success-icon {
  font-size: 2rem;
}

.success-details {
  text-align: left;
  background: #f8f9ff;
  padding: 16px;
  border-radius: 8px;
  border-left: 4px solid #4361ee;
}

.success-details p {
  margin: 8px 0;
  color: #4a5568;
}

.success-tip {
  color: #718096 !important;
  font-style: italic;
  margin-top: 12px !important;
  font-size: 0.9rem;
}

/* 响应式调整 */
@media (max-width: 680px) {
  .success-message {
    padding: 20px;
    max-width: 320px;
  }

  .success-header h3 {
    font-size: 1.2rem;
  }

  .error-message {
    font-size: 0.8rem;
    padding-left: 0;
  }
}
</style>
